<template>
  <view class="list_box">
    <u-empty mode="favor" v-if="list.length == 0"></u-empty>
    <view
      class=""
      v-for="(item, index) in list"
      :key="index"
      style="position: relative"
      @click="$utils.toUrl('/marketing/serviceHome/engineer/item/index?id=' + item.id)"
    >
      <u-row>
        <u-col span="1">
          <image
            v-show="isEdit"
            class="del"
            :src="
              item.isChecked
                ? asyncImgs.history.checked
                : asyncImgs.history.unchecked
            "
            mode=""
            style="width: 40rpx; height: 40rpx"
            @click.stop="onChecked(item)"
          ></image>
        </u-col>
        <u-col :span="isEdit ? 11 : 12">
          <u-row>
            <u-col span="4"
              ><image
                :src="item.logo"
                mode="widthFix"
                style="width: 100%; height: 180rpx; border-radius: 10rpx"
              ></image
            ></u-col>
            <u-col span="8">
              <view class="name">{{ item.name }}</view>
              <view class="des">
                {{ item.worker_cat.join("｜") }}
              </view>
            </u-col>
          </u-row>
        </u-col>
      </u-row>

      <view
        style="
          width: 80%;
          height: 2rpx;
          background-color: #eff2f7;
          margin: 30rpx 0;
          margin-left: 20%;
        "
        v-if="index != list.length - 1"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    isCheckAll: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    checkedItemList() {
      return this.list.filter((item) => item.isChecked);
    },
  },
  created() {
    this.getListData();
  },
  watch: {
    isCheckAll(val) {
      if (val) {
        this.list.forEach((item) => {
          item.isChecked = true;
        });
      } else if (this.checkedItemList.length == this.list.length) {
        this.list.forEach((item) => {
          item.isChecked = false;
        });
      }
    },
    checkedItemList: {
      deep: true,
      handler(val) {
        this.$emit("checkChange", val);
      },
    },
    list: {
      deep: true,
      handler(val) {
        let res = true;
        val.forEach((el) => {
          res = el.isChecked && res;
        });
        this.$emit("allChecked", res);
      },
    },
  },
  methods: {
    async getListData() {
      try {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        const res = await this.$allrequest.user.favoriteList({ type: 6 });
        uni.hideLoading();
        res.data.list.forEach((item) => {
          item.isChecked = false;
        });
        this.list = res.data.list;
      } catch (e) {
        //TODO handle the exception
      }
    },
    onChecked(item) {
      item.isChecked = !item.isChecked;
    },
  },
};
</script>

<style lang="scss" scoped>
.cat {
  position: absolute;
  right: 30rpx;
  bottom: 20rpx;
  border-radius: 50rpx;
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  background-color: rgb(240, 240, 240);
  display: flex;
  justify-content: center;
  align-items: center;
}
.del {
  transform: translate(0, 70rpx);
}
.list_box {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 28rpx;
  margin-bottom: 120rpx;
}

.name {
  overflow: hidden;
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.des {
  padding: 6rpx 0 14rpx;
  font-size: 24rpx;
}
</style>
